<template>
  <div class="app-container">
    <div class="filter-container"/>
    <div class="filter-container">

    </div>

    <el-card class="box-card">

      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="待处理请求"
          name="first"
        >
          <div class="app-container">
            <div class="filter-container">

              <el-date-picker
                v-model="listQuery.startDay"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择开始日期时间"
                style="width: 200px;"
                class="filter-item"
                clearable
              />
              <el-date-picker
                v-model="listQuery.endDay"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="datetime"
                placeholder="选择结束日期时间"
                style="width: 200px;"
                class="filter-item"
                clearable
              />
              <el-button
                v-waves
                class="filter-item"
                type="primary"
                icon="el-icon-search"
                @click="handleFilter"
              >
                搜索
              </el-button>

            </div>

            <el-table
              :key="key"
              :data="tableData1"
              border
              fit
              highlight-current-row
              style="width: 100%"
            >
              <el-table-column
                label="序号"
                prop="id"
                align="center"
                width="50"
              >
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>

              <el-table-column
                prop="driverName"
                label="名称"
                align="center"
                width=""
              />
              <el-table-column
                prop="vehicle"
                label="车牌"
                align="center"
                width="170"
              />
              <el-table-column
                label="油卡类型"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  {{ scope.row.typeId | typeFilter1 }}
                </template>
              </el-table-column>
              <el-table-column
                prop="created"
                label="申请时间"
                align="center"
                width="140"
              />
              <el-table-column
                prop="payMoney"
                label="开卡费用"
                align="center"
                width=""
              />
              <el-table-column
                label="领取方式"
                width=""
                align="center"
              >
                <template slot-scope="scope">
                  <el-tag size="medium" class="master-card"
                          @click="receiveInfo(scope.row)">
                    {{ scope.row.receiveType | typeFilter2 }}
                  </el-tag>
                </template>
              </el-table-column>

              <!--<el-table-column-->
              <!--prop="expName"-->
              <!--label="收件人姓名"-->
              <!--align="center"-->
              <!--width=""-->
              <!--/>-->
              <!--<el-table-column-->
              <!--prop="expPhone"-->
              <!--label="收件人电话"-->
              <!--align="center"-->
              <!--width=""-->
              <!--/>-->
              <!--<el-table-column-->
              <!--prop="receiveAddress"-->
              <!--label="地区"-->
              <!--align="center"-->
              <!--width=""-->
              <!--/>-->
              <!--<el-table-column-->
              <!--prop="alreadyMoney"-->
              <!--label="详细地址"-->
              <!--align="center"-->
              <!--width=""-->
              <!--/>-->
              <el-table-column
                label="操作"
                align="center"
                width=""
                class-name="small-padding fixed-width"
                fixed="right"
              >
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    style="width:80px"
                    @click="handleCreate(scope.row)"
                  >分配油卡
                  </el-button>

                </template>
              </el-table-column>

            </el-table>

            <pagination
              v-show="total>0"
              :total="total"
              :page.sync="listQuery.page"
              :limit.sync="listQuery.limit"
              @pagination="getList"
            />
          </div>
          <select-oil-card ref="selectOilCard" @bindCard="doBindCard"></select-oil-card>
          <receive-info ref="receiveInfo"></receive-info>
        </el-tab-pane>
        <el-tab-pane
          label="已处理请求"
          name="second"
        >
          <saleCard2></saleCard2>

        </el-tab-pane>

      </el-tabs>
    </el-card>

    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      top="2vh"
      width="680px"
    >
      <el-form
        ref="temp"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="110px"
        style="width:550px; margin-left:50px;"
      >

        <el-form-item
          label="主卡"
          prop="cooId"
        >

          <el-select
            v-model="temp.cooId"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择主卡"
            style="width:440px"
            @change="choseCard"
          >
            <el-option
              v-for="item in mainCardList"
              :label="item.cardNum"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="子卡"
          prop="cardId"
        >

          <el-select
            v-model="temp.cardId"
            filterable
            class="filter-item"
            clearable
            placeholder="请选择子卡"
            style="width:440px"
          >
            <el-option
              v-for="item in childCardList"
              :label="item.cardNum"
              :value="item.id"
            />
          </el-select>
        </el-form-item>

        <el-form-item
          label="用户"
          prop="driverId"
        >

          <el-input
            v-model="temp.driverName"
            disabled
          />

        </el-form-item>
        <el-form-item
          label="用户"
          prop="driverId"
          style="display:none"
        >

          <el-input
            v-model="temp.driverId"
            disabled
          />

        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">
          {{ $t('table.cancel') }}
        </el-button>
        <el-button
          type="primary"
          @click="createData()"
        >
          {{ $t('table.confirm') }}
        </el-button>
      </div>

    </el-dialog>

  </div>
</template>
<script>
  import {
    addBankCard,
    bankCardList,
    getPhoneCode,
    agentGetMoney,
    unBindBankCard,
    transferWallet,
    getSupplyAll,
    getallAgent,
    walletTradeList,
    getAllBuyOilByPage,
    getOilCardAll,
    addCooVerify,
    BuyOilBind
  } from "@/api/v1";
  import {getInfo, resetOwnerPassword, resetAgentPassword} from "@/api/user";
  import saleCard2 from "@/components/saleCard2"; // Secondary package based on el-pagination
  import selectOilCard from "@/components/selectOilCard"; // Secondary package based on el-pagination
  import receiveInfo from "@/components/receiveInfo"; // Secondary package based on el-pagination

  import waves from "@/directive/waves"; // Waves directive
  import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
  import {parseTime} from "@/utils";
  import {MessageBox, Message} from "element-ui";

  export default {
    directives: {waves},
    components: {Pagination, saleCard2, selectOilCard,receiveInfo},
    filters: {
      typeFilter1(role) {
        switch (role) {
          case 1:
            return "中石油";
          case 2:
            return "中石化";
        }
      },
      typeFilter2(role) {
        switch (role) {
          case 1:
            return "上门自取";
          case 2:
            return "快递";
        }
      }
    },
    data() {
      return {
        handId: null,
        total: 0,
        tableData1: [],
        tableData2: [],

        dialogStatus: "",
        textMap: {
          update: "编辑",
          create: "新增"
        },
        transBtn: false,
        childCardList: [],
        walletDate: [],
        supply: [],
        activeName: "first",
        name: "",
        phone: "",
        currentMoney: "",
        listQuery: {
          page: 1,
          limit: 20,
          sort: "+id",
          relationId: "",
          relationType: ""
        },
        key: 1, // table key
        walletkey: 1, // table key
        dialogFormVisible: false,
        dialogFormMoney: false,
        dialogFormMoneyTX: false,
        ruleForm: {
          oldPassword: "",
          newPassword: "",
          newPassword2: ""
        },
        payForm: {
          oldPassword: "",
          newPassword: "",
          newPassword2: ""
        },
        info: {},
        temp: {
          driverName: "",
          id: "",
          cardId: "",
          driverId: ""
        },
        rules: {
          cardId: [{required: true, message: "请选择子卡", trigger: "change"}],
          cooId: [{required: true, message: "请选择主卡", trigger: "change"}],
          driverId: [{required: true, message: "请选择主卡", trigger: "blur"}]
        },
        isAgentSub: false
      };
    },
    watch: {
      checkboxVal(valArr) {
        this.formThead = this.formTheadOptions.filter(
          i => valArr.indexOf(i) >= 0
        );
        this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
        this.walletkey = this.walletkey + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
      }
    },

    created() {
      this.getList();
      this.mainCardList();
    },
    methods: {
      choseCard(e) {
        console.log(e);
        const data = {
          parentId: e,
          type: 2
        };
        getOilCardAll(data).then(res => {
          this.childCardList = res.data;
        });
      },
      mainCardList() {
        var data = {
          type: 1
        };
        getOilCardAll(data).then(res => {
          this.mainCardList = res.data;
        });
      },
      getList() {
        this.listLoading = true;
        this.listQuery.state = 0;

        getAllBuyOilByPage(this.listQuery).then(res => {
          this.tableData1 = res.data.records;
          this.total = Number(res.data.total);
          console.log(this.tableData);
        });
      },

      handleClick(tab, event) {
        console.log(tab, event);
      },
      createData() {
        this.$refs["temp"].validate(valid => {
          if (valid) {
            BuyOilBind(this.temp).then(res => {
              // this.list.unshift(this.temp);
              this.dialogFormVisible = false;
              this.$notify({
                title: "成功",
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.getList();
            });
          }
        });
      },
      resetTemp() {
        this.temp.driverName = "";
        this.temp.id = "";
        this.temp.cardId = "";
        this.temp.driverId = "";
      },
      handleCreate(row) {
        this.$refs.selectOilCard.parentRefMethod(row.id, row.userId);
//      this.resetTemp();
//
//      this.temp.id = row.id;
//      this.temp.driverId = row.userId;
//      this.temp.driverName = row.driverName;
//
//      console.log(this.temp);
//      this.dialogStatus = "create";
//      this.dialogFormVisible = true;
//      this.editPhone = false;
//      this.$nextTick(() => {
//        this.$refs["temp"].clearValidate();
//      });
      },
      //执行绑定操作
      doBindCard(val){
        this.getList();
      },
      handleFilter() {
        this.listQuery.page = 1;
        this.getList();
      },
      receiveInfo(row){
        this.$refs.receiveInfo.parentRefMethod(row);
      }
    }
  };
</script>
<style scoped>
  .master-card {
    cursor: pointer;
  }
</style>


